<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=640" />

    <link rel="stylesheet" href="stylesheets/core.css" media="screen"/>
    <link rel="stylesheet" href="stylesheets/mobile.css" media="handheld, only screen and (max-device-width:640px)"/>
    <link rel="stylesheet" href="stylesheets/pygment_trac.css"/>

    <script type="text/javascript" src="javascripts/modernizr.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascripts/headsmart.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $('#main_content').headsmart()
      })
    </script>
    <title>Headsmart by cameronmcefee</title>
  </head>

  <body>
    <a id="forkme_banner" href="https://github.com/cameronmcefee/headsmart">Fork Me on GitHub</a>
    <div class="shell">

      <header>
        <span class="ribbon-outer">
          <span class="ribbon-inner">
            <h1>Headsmart</h1>
            <h2>Dynamic header hierarchy</h2>
          </span>
          <span class="left-tail"></span>
          <span class="right-tail"></span>
        </span>
      </header>

      <section id="downloads">
        <span class="inner">
          <a href="https://github.com/cameronmcefee/headsmart/zipball/master" class="zip"><em>download</em> .ZIP</a><a href="https://github.com/cameronmcefee/headsmart/tarball/master" class="tgz"><em>download</em> .TGZ</a>
        </span>
      </section>

      <span class="banner-fix"></span>

      <section id="main_content">
        <h1>Welcome to Headsmart</h1>

<p>Headsmart is a jQuery plugin which applies header hierarchy dynamically based on which headers are present.</p>

<p>When building templates, we can't put faith in our users that they'll choose the header tag hierarchy that we prefer. While we'd love to assume that they'd know we'd like them to start with an <code>&lt;h3&gt;</code>, more likely they'll start with an <code>&lt;h1&gt;</code>. This is where Headsmart comes in.</p>

<p>Headsmart looks at the element you supply it, and assigns header classes levels 1 – 6 to the header tags that are actually present. That means that the largest header will still look like your level 1 header whether it's a <code>&lt;h1&gt;</code> or <code>&lt;h3&gt;</code>.</p>

<h2>Usage</h2>

<ol>
<li><p>Since you will be styling your headers with classes rather than their actual elements, you'll want to use come kind of <a href="http://meyerweb.com/eric/tools/css/reset/">css reset</a> to get all your headers looking the same.</p></li>
<li><p>Now that your css is all equal, simply use headsmart on the element containing your content. Headsmart only looks for direct children of the element supplied, so nested headers will not be effected
<code>$('#site-content').headsmart()</code></p></li>
<li><p>Style the classes generated by headsmart as you please:
<code>.header-level-1</code>
<code>.header-level-2</code>
<code>.header-level-3</code>
<code>.header-level-4</code>
<code>.header-level-5</code>
<code>.header-level-6</code></p></li>
</ol><p><img src="http://share.cameronmcefee.com/screencap/Headsmart_Demo-20120207-154105.png" alt=""></p>
      </section>

      <footer>
        <span class="ribbon-outer">
          <span class="ribbon-inner">
            <p>this project by <a href="https://github.com/cameronmcefee">cameronmcefee</a> can be found on <a href="https://github.com/cameronmcefee/headsmart">GitHub</a></p>
          </span>
          <span class="left-tail"></span>
          <span class="right-tail"></span>
        </span>
        <p>Generated with <a href="http://pages.github.com">GitHub Pages</a> using Merlot</p>
        <span class="octocat"></span>
      </footer>

    </div>

    
  </body>
</html>
